$nextTick

<div x-data="{ fruit: 'apple' }">
    <button
        x-on:click="
            fruit = 'pear';
            $nextTick(() => { console.log($event.target.innerText) });
        "
        x-text="fruit"
    ></button>
</div>

$nextTick 是一個魔術屬性，它允許你只在 Alpine 進行回應式 DOM 更新後才執行給定的運算式。這對於你想在 DOM 狀態回應了你的任何資料更新後，再與之互動的情形下非常有用。

在這範例中，
x-data="{ fruit: 'apple' }"預設fruit為'apple'，
在button裡的click事件中寫上了
fruit = 'pear';
將fluit改為'pear'，
$nextTick(() => { console.log($event.target.innerText) });
點擊之後會回應裡面的更新，
然侯執行裡面的事件。
因此點擊後，
結果就會看到button上文字從apple變成pear，
然後在console.log中看到pear自串。

$watch

<div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">
    <button @click="open = ! open">Toggle Open</button>
</div>

你可以使用 $watch 魔術方法來「監視」一個組件的屬性。在上述的範例中，當按鈕被點擊和 open 被改變時，你所給予的回呼將會被觸發，並且 console.log 將會顯示新的數值。

範例中，
x-data="{ open: false }"預設open為false，
而button的click事件@click="open = ! open"來切換true與false，
x-init="$watch('open', value => console.log(value))"在這之中放上了監視的屬性，
因此在切換的時候，
都會透過console.log顯示出來。